    <!-- Bootstrap styles -->
	<div class="box">
		<div class="box-body table-responsive">
		<table width='100%'>
		<tr>
			<td width="10%" ><em>CARI DATA</em></td>
			<td >
			<div class="input-group col-xs-4">
			<input type="text" name="cari" id="cari" class="form-control" placeholder="ketik pencarian data" onchange="pop()">
			<span class="input-group-btn">
				<button type='button' name='seach' id='search-btn' class="btn btn-flat" onclick="pop()"><i class="fa fa-search"></i></button>
			</span>			
			</div>
			</td>
		</tr>
		</table>
		</div><!-- /.box-body -->
	</div><!-- /.box -->



	<!-- FORM INPUT --------------------------------------------------------------------------------------------------------- -->



	<div class="box">
		<div class="box-body table-responsive">
		<table width='100%'>
		<tr>
			<td width="10%">NAMA USER</td>
			<td ><div class="input-group col-xs-2"><input type="text" name="user" id="user" class="form-control"></div>
			</td>
		</tr>
		<tr>
			<td width="10%">PASSWORD</td>
			<td ><div class="input-group col-xs-2"><input type="password" name="pass" id="pass" class="form-control"></div>
			</td>
		</tr>
		<tr>
			<td width="10%">NAMA LENGKAP</td>
			<td ><div class="input-group col-xs-5"><input type="text" name="nama" id="nama" class="form-control"></div>
			</td>
		</tr>
		<tr>
			<td width="10%">SKPD</td>
			<td ><div class="input-group col-xs-5"">
					<select class="form-control" id="skpd" name="skpd">
						<option value='0'>PILIH</option>
						<?php
							$skpd=$this->mod_master->mskpd();
							foreach($skpd as $val){
								echo "<option value='".$val->kd_skpd."'>".$val->nm_skpd."</option>";
							}
						?>
					</select>
				 </div>
			</td>
		</tr>
		<tr>
			<td width="10%"></td>
			<td ><button class="btn btn-primary btn-sm" style="width:60px" id="simpan" onclick="simpan()">Simpan</button>&nbsp;<button class="btn btn-primary btn-sm" style="width:60px" onclick="hapus()">Hapus</button>
			</td>
		</tr>

		</table>
		</div><!-- /.box-body -->
	</div><!-- /.box -->


	<!-- LISTING --------------------------------------------------------------------------------------------------------- -->

	<!-- POPUP -->
	<a class="initialism fade_open btn btn-success" href="#fade" id="klik" style="display:none">Fade</a>
	<div id="fade" class="well">
		<div class="box">
			<div class="box-body table-responsive">
					<div id="isi" name="isi">test
					</div>
			</div><!-- /.box-body -->
		</div><!-- /.box -->
		<button class="fade_close btn btn-default" id="tutup">Close</button>
	</div>


	<!-- END --------------------------------------------------------------------------------------------------------- -->


	<!-- jQuery 2.0.2 -->
	<script src="<?php echo base_url(); ?>js/jquery.min.js"></script>

	<!-- page script -->
	<script type="text/javascript">

		$(document).ready(function() {
			$('#fade').popup({
			  transition: 'all 0.5s',
			  scrolllock: true
			});
		});

		function pop(){
			var cparam=document.getElementById('cari').value;
			$(document).ready(function(){
				$.ajax({
					type: "POST",
					url: '<?php echo base_url(); ?>/index.php/master/listuser',
					data: ({param:cparam}),
					dataType:"json",
					success:function(data){						
						if(data.rec==0){
							alert('Hasil pencarian kosong');
						}else{
							$('#isi').html(data.isi);
							document.getElementById('klik').click();
						}
					}
				});
			});
		}

		function lihatdata(nmuser){
			$(document).ready(function(){
				$.ajax({
					type: "POST",
					url: '<?php echo base_url(); ?>/index.php/master/lihatuser',
					data: ({param:nmuser}),
					dataType:"json",
					success:function(data){						
						document.getElementById('user').value=data.user;
						document.getElementById('pass').value='';
						document.getElementById('nama').value=data.nama;
						$('#skpd').val(data.skpd);
						document.getElementById('tutup').click();
					}
				});
			});
		}

		function simpan(){
			var cuser=document.getElementById('user').value;
			var cpass=document.getElementById('pass').value;
			var cnama=document.getElementById('nama').value;
			var cskpd=document.getElementById('skpd').value;
			if((cuser=='')||(cnama=='')){
				alert('Field tidak lengkap !!!');
				return;
			}

			$(document).ready(function(){
				$.ajax({
					type: "POST",
					url: '<?php echo base_url(); ?>/index.php/master/simpanuser',
					data: ({user:cuser,pass:cpass,nama:cnama,skpd:cskpd}),
					dataType:"json",
					success:function(data){			
						kosong();
						alert(data.hasil);
					}
				});
			});
		}

		function hapus(){
			var cuser=document.getElementById('user').value;	
			if(cuser==''){
				alert('Cari dahulu data yang akan dihapus !!!');
				return;
			}

			$(document).ready(function(){
				$.ajax({
					type: "POST",
					url: '<?php echo base_url(); ?>/index.php/master/hapususer',
					data: ({user:cuser}),
					dataType:"json",
					success:function(data){		
						kosong();
						alert(data.hasil);
					}
				});
			});
		}

		function kosong(){
				document.getElementById('user').value='';
				document.getElementById('pass').value='';
				document.getElementById('nama').value='';
				$('#skpd').val('0');
		}

	</script>
